<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="mastyle.css">
</head>
<body>
    <div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:200px">
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
  <p>滚动我</p>
  <p>来回滚动我</p>
</div>
    <h1>这是一个绝对定位了的标题</h1>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p class="pos_fixed">Some more text</p>
    <div class="ten">
    </div>
    <ul class="kl">
        <li>主页</li>
        <li>姓名</li>
        <li>电话</li>
        <li>文化</li>
    </ul>
    <div class="five">
        <P class="six">主页</P>
        <P class="seven">姓名</P>
        <p class="eight">电话</p>
        <p class="nine">文化</p>
    </div>
    <p class="uppercase">Every time I see you, I fall in love a little more.</p>
    <p class="lowercase">Every time I see you, I fall in love a little more.</p>
    <p class="capitalize">Every time I see you, I fall in love a little more.</p>
    <p>链接到: <a href="www.qq.com">qq.com</a></p>
    <p id="para1">Hello 常</p>
    <h1>锄禾日当午</h1>
    <p class="one">主页</p>
    <p class="two">姓名</p>
    <p class="three">电话</p>
    <p class="four">文化</p>
    <p class="hr"></p>
    <div style="height:300px;width:400px;  overflow: scroll; color: #ea26c6;">
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
        <p>Every time I see you, I fall in love a little more.</p>
    </div> 
    <div style="width:500px;height:500px;border:2px solid green;position: relative;">
        <div style="width: 100px; height: 100px;border: 2px solid greenyellow;position: absolute;right: 10px;bottom: 10px;">
    </div>
    <div class="fixed">总有些情绪是该说给懂的人听</div>
    <div class="static">
        I fall in love a little more.;
        </div>
</body>
    <style>
        div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;}
    .h1{
	    position:absolute;
	    left:100px;
	    top:150px;}
        h2.pos_left{
	    position:relative;
	    left:-20px;}
        h2.pos_right{
	    position:relative;
	    left:20px;}
        p.pos_fixed{
	    position:fixed;
	    top:30px;
	    right:5px;
            }
        div.static {
        position: static;
        border: 10px solid #73AD21;
        }
        .kl{
            background-color: #ea26c6;
        }
        .kl :hover{
            background-color: #ea26c6;
        }
        li{
            background-color: aqua;
            height: 20px;
            border: 1px solid green;
        }
        .li :hover{
            background-color: aqua;
            color: #c4a9be;
        }
        ul{
            list-style-type:none ;
            margin: 0;
            padding: 0;
        }
        .one{   background-color: #3ae318;
                height: 100px;
                width: 200px;
                margin-top: -16px;}
        .two{  background-color: #c262b2;
                height: 100px;
                width: 200px;
                margin-top: -16px;}  
        .three{
            background-color: #c4a9be;
                height: 100px;
                width: 200px;
                margin-top: -16px;}
        .four {
            background-color: rgb(196, 167, 194);
                height: 100px;
                width: 200px;
                margin-top: -16px;}
        .one:hover{
            background-color: #97aba4;
            color: wheat}
        .two:hover{
            background-color: #97aba4;
            color: wheat}
        .three:hover{
            background-color: #97aba4;
            color: wheat}
        .four:hover{
            background-color: #97aba4;
            color: wheat}
        .five{
            display: flex;}        
        .six{
            background-color: rgb(37, 201, 105);
            color: #ea26c6;
            height: 80px;
            width: 200px;}
        .seven{
            background-color: rgb(26, 161, 206);
            color: #ea26c6;
            height: 80px;
            width: 200px;}
        .eight{
            background-color: rgb(37, 152, 201);
            color: #ea26c6;
            height: 80px;
            width: 200px;}
        .nine{   
            background-color: rgb(37, 176, 201);
            color: #ea26c6;
            height: 80px;
            width: 200px;}
        .six:hover{
            background-color: #97aba4;
            color: wheat}
        .seven:hover{
            background-color: #97aba4;
            color: wheat}
        .eight:hover{
            background-color: #97aba4;
            color: wheat}
        .nine:hover{
            background-color: #97aba4;
            color: wheat}
        #para1{
	            text-align:center;
	            color:rgb(87, 165, 234);}
       *body {
	            background-image:url('file:///C:/Users/fb/Desktop/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250309210220.jpg');
	            background-repeat: repeat-y;
                background-size:1500px 1500px ;}
                h1 {text-decoration:overline;}
                h2 {text-decoration:line-through;}
                h3 {text-decoration:underline;}
                a {text-decoration:none;}
                p.uppercase {text-transform:uppercase;}
                p.lowercase {text-transform:lowercase;}
                p.capitalize {text-transform:capitalize;}
                h1 {text-shadow:2px 2px #3683da;}
    </style>
    <h1>You light up my world.</h1>
    <h2>You light up my world.</h2>
    <h3>You light up my world.</h3>
</body>
</html>